<template>
    <div>
        <Card dis-hover :bordered="false">
            <DatePicker class="ivu-mb-16"
                v-model="params.date"
                v-width="200"
                type="date"
                :options="options"
                :clearable="false"
                @on-change="askData"
            />
            <Table :columns="columns" :data="list" :loading="loading">
                <template slot="wechatno" slot-scope="{ row }">
                    <p>{{row.wechatno||row.wechatid}}</p>
                </template>
            </Table>
            <h4 class="ivu-mt-16">合计：未回复人数{{total}}人</h4>
        </Card>
    </div>
</template>
<script>
import { statisticsnoreplyreportreport } from "@/api/hqapi";
export default {
    data() {
        return {
            options: {
                disabledDate (date) {
                    return date && date.valueOf() > Date.now() - 86400000;
                }
            },
            total: 0, //  分页总数
            pageOpts: [10, 20, 30, 50], //  分页每页数量
            params: { page: 0, pageSize: 0, date: new Date(new Date().getTime()-24*60*60*1000) }, //  请求参数
            loading: false,
            columns: [
                { title: "客服手机", key: "wechatnick", minWidth: 300 },
                { title: "微信号", slot: "wechatno", tooltip: true, minWidth: 200 },
                { title: "咨询员", key: "member_name", width: 200 },
                { title: "未回复人数（人）", key: "no_reply", width: 180 },
            ],
            list: []
        };
    },
    mounted() {
        this.initial();
    },
    methods: {
        initial() {
            this.askData()
        },
        askData() {
            statisticsnoreplyreportreport(this.params).then(res=>{
                this.list = res.list
                this.total = res.total
            })
        },
    },
};
</script>
